<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2; }
        #footer ul li{  padding-top: 33.5px; padding-bottom: 8px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #6ab494; }
        #footer ul li:nth-child(1){ background-image: url(../../icon/message.png); }
        #footer ul li:nth-child(2){ background-image: url(../../icon/approve.png); }
        #footer ul li:nth-child(3){ background-image: url(../../icon/oppose.png); }
        #footer ul li:nth-child(4){ background-image: url(../../icon/collect.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../../icon/message.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../../icon/agreechousen.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../../icon/oppose.png); }
        #footer ul li:nth-child(4).active{ background-image: url(../../icon/collect.png); }
        .flex-con{
          overflow: scroll;
        }
        .fixed_bottom {
           position:fixed;
           left:0px;
           bottom:0px;
           width:100%;
           height:50px;
           z-index:10;
        }
        header {
          position: relative;
          width: 100%;
          height: 43px;
          background-color: #ffffff
        }
        header .left {
          position: absolute;
          top: 15px;
          width: 21.5px;
          height: 15.5px;
          left: 15px;
          background-image: url(../../icon/back.png);
          background-size: 21.5px 15.5px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        header .right {
          position: absolute;
          top: 15px;
          width: 5px;
          height: 19px;
          right: 15px;
          background-image: url(../../icon/more.png);
          background-size: 5px 19px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        .title {
          /*border: 1px solid red;*/
          position: relative;
          width: 100%;
          height: auto;
          bottom: auto;
          padding-left: 24px;
          padding-top: 24px;
          padding-right: 24px;
          box-sizing: border-box;
          font-size: 18px; color: #000000; text-align: left;
        }
        .tag {
          /*border-bottom: 1px solid #d3d2d2;*/
          /*border: 1px solid blue;*/
          position: relative;
          width: 100%;
          height: 12px;
          bottom: auto;
          padding-left: 24px;
          padding-top: 10px;
          box-sizing: border-box;
          font-size: 12px; color: #917dcf; text-align: left;
        }
        .description {
          /*border: 1px solid blue;*/
          width: 85%;
          height: auto;
          font-size: 16px; color: #8e8e8e; text-align: left;
          padding-top: 20px;
          margin-left: 24px
        }
        .follow-box {
          /*border: 1px solid red;*/
          width: 100%;
          height: 36px;
          background-color: #fff;
          padding-top: 24px;
          /*margin-left: 24px;*/
        }
        .follow-box .note {
          /*border: 1px solid blue;*/
          width: 130px;
          height: 36px;
          background-color: #fff;
          font-size: 16px; color: #8e8e8e; text-align: left;
          line-height: 36px;
          padding-left: 20px
        }
        .follow {
          /*border: 1px solid blue;*/
          width: 78px;
          height: 30px;
          float: right;
          margin-right: 24px;
          background-color: #6d7cd9;
          border-radius: 4px;
          font-size: 16px; color: #fff; text-align: center;
          line-height: 30px;
        }

        nav {
          /*border: 1px solid red;*/
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-flex-flow: row;
          flex-flow: row;
          position: relative;
          width: 80%;
          height: 64px;
          margin: 0 auto;
        }
        .reward {
					position: relative;
          width: 80%;
          height: 64px;
          line-height: 64px;
					padding-left: 24px;
          font-size: 16px; color: #000; text-align: left;
        }
        .reward img {
          height: 16px;
          width: 16px;
          vertical-align: middle;
        }

        .answer {
          border-top: 1px solid #d3d2d2;
          width: 100%;
          height: auto;
          background-color: #fff;
          padding-top: 24px;
          padding-bottom: 50px;
        }
        .answer .answer-box {
          width: 100%;
          height: auto;
          padding-top: 36px
        }
        .answer-box .answer-box-left {
          width: 36px;
          height: auto;
          float: left;
          padding-left: 24px;
        }
        .answer-box-left .answer-user-imag {
          width: 36px;
          height: 36px;
        }
        .answer-user-imag img {
          width: 36px;
          height: 36px;
          border-radius: 18px;
        }
        .answer-box .answer-box-right {
          /*border: 1px solid blue;*/
          width: 259px;
          height: auto;
          float: left;
        }
        .answer-box-right .answer-user-name {
          width: auto;
          height: 16px;
          font-size: 16px; color: #000000; text-align: left;
          padding-left: 8px
        }
        .answer-box-right .answer-user-data {
          width: auto;
          height: 14px;
          font-size: 14px; color: #8e8e8e; text-align: left;
          padding-top: 10px;
          padding-left: 8px
        }
        .answer-box-right .answer-user-comment {
          /*border: 1px solid red;*/
          position: relative;
          width: 100%;
          height: auto;
          font-size: 16px; color: #8e8e8e; text-align: left;
          padding-top: 15px;
          padding-left: 8px
        }
        .answer-box .answer-box-bottom {
          bottom: 0px;
          border: 1px solid red;
          width: 100%;
          height: 21.5px;
        }
        .answer-box-bottom .answer-approve {
          float: left;
          background-image: url(../../icon/approve.png);
          background-size: 21.5px 21.5px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        .answer-approve .selected {
          width: 21.5px;
          height: 21.5px;
          float: left;
          background-image: url(../../icon/agreechousen.png);
          background-size: 21.5px 21.5px;
          background-position: center center;
          background-repeat: no-repeat;
        }

        #little-window ul li {
          height:50px;
          font-size: 16px; color: #000; text-align: center;
          line-height: 50px;
        }
        .little-window {
          /*border: 1px solid red;*/
          position: fixed;
          right: 24px;
          top: 50px;
          height: 200px;
          width: 113.5px;
          background-color: #fff;
          font-size: 16px;color: #000; text-align: center;
          z-index: 10;
          box-shadow:  darkgrey  1px 1px 1px 1px;
        }

    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">

    <div id="main">
      <header id="header"  onclick="">
        <div class="left" onclick="back()"></div>
        <div class="center"></div>
        <div class="right" onclick="little_window()"></div>
      </header>
      <div id='little-window' class="little-window" style="display:none">
        <ul>
          <li>邀请回答</li>
          <li>取消悬赏</li>
          <li>分享</li>
          <li>举报</li>
        </ul>
      </div>
      <div id = "title" class="title"  onclick="closelitwindow()">
      现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
      </div>
      <div id="tag"  class="tag"  onclick="closelitwindow()">
        摄影 · 旅游 · 体验
      </div>
      <div class="description"  onclick="closelitwindow()">
        当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
      </div>
      <div class="reward" onclick="" tapmode>
          <img src="../../icon/award.png" alt="">
          悬赏60元
			</div>


    </div>



</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    apiready = function () {

        var main = $api.byId('header');
        var title = $api.byId('title');
        var tag = $api.byId('tag');

        var header_H = $api.offset(header).h;
        var tag_H = $api.offset(tag).h;
        var title_H = $api.offset(title).h;
    }


    var litwindow = $api.dom('#little-window');

    function little_window() {
        if (litwindow.style.display == "none") {
            litwindow.style.display = 'block';
        }
        else {
            litwindow.style.display = 'none';
        }
    }


    function closelitwindow() {
        litwindow.style.display = 'none';
    }
    function open_comment() {
        api.openFrame({
            name: 'comment',
            url: './comment_box.html',
            rect: {
                x:0,
                y:0,
                w:api.winWidth,
                h:api.winHeight
            },
            bgColor: 'rgba(0,0,0,0.6)',
            // bounces: false,
        });
    }



    function back() {
        api.openWin({
            name: 'home',
            url: '../index.html',
            pageParam: {
                name: 'test'
            }
        });

    }


</script>
